Nightwatch101 #8：指令 Part 2

2018 iT 邦幫忙鐵人賽

DAY 8

DevOps

Nightwatch101：使用 Nightwatch 實現 End-to-End Testing系列第 8 篇

2018鐵人賽 nightwatch end-to-end testing 前端測試自動化測試

Summer

團隊露天廢物

2017-12-18 09:32:18

4442 瀏覽

分享至

Nightwatch.js

前情提要-指令 Part 1。

指令分為兩種－Nightwatch 提供的指令與開發者撰寫的客製化指令，以下介紹 Nightwatch 所提供的指令。程式碼可以打在 test/e2e/testDemo.js 並執行 nightwatch ./test/e2e/testDemo.js 來跑跑看喔！

以下繼續 Part 2，來聊聊 Cookie、Window 和 Log 相關的指令。

本系列文章皆使用這個專案，可以拉下來玩玩；有什麼問題都可以提出 issue。

getCookie

取得特定 cookie 的値，格式為 JSON。這裡使用 webdriver 的 cookie 協定指令。第一個參數是 cookie name，第二個參數是 callback（optional），回傳一個物件或 null。

打開露天首頁，取得名為 _ts_id 的 cookie。檢視名稱、資料型別是否為字串。

module.exports = {
  'Demo Test': browser => {
    browser
      .url('http://www.ruten.com.tw/')
      .getCookie('_ts_id', result => {
        browser.assert.equal(result.name, '_ts_id');
        browser.assert.equal(typeof result.value, 'string');
      })
      .end()
  }
}

getCookie

getCookies

取得所有可得的 cookie，格式為一個陣列，裡面是 JSON。這裡使用 webdriver 的 cookie 協定指令。第一個 callback（optional），回傳 Array.<object>。

打開露天首頁，取得所有可得的 cookie，並檢視是否有 5 個項目。由於只拿到 3 個，就出錯了 ╮(╯_╰)╭

module.exports = {
  'Demo Test': browser => {
    browser
      .url('http://www.ruten.com.tw/')
      .getCookies(result => {
        browser.assert.equal(result.value.length, 5);
      })
     .end()
  }
}

getCookies

setCookie

設定 cookie。這裡使用 webdriver 的 cookie 協定指令。第一個參數是 cookie 物件，第二個參數是 callback（optional）。

module.exports = {
  'Demo Test': browser => {
    browser
      .url('http://www.ruten.com.tw/')
      .setCookie({
        name: 'test_cookie',
        value: 'Hello World!'
      })
      .getCookie('test_cookie', result => {
        browser.assert.equal(result.name, 'test_cookie');
        browser.assert.equal(result.value, 'Hello World!');
      })
      .end()
  }
}

setCookie

deleteCookie

刪除指定 cookie，若指定的 cookie 不存在就不執行。第一個參數是 cookie 名稱，第二個參數是 callback（optional）。

module.exports = {
  'Demo Test': browser => {
    browser
      .url('http://www.ruten.com.tw/')
      .setCookie({
        name: 'test_cookie',
        value: 'Hello World!'
      })
      .deleteCookie('test_cookie')
      .getCookie('test_cookie', result => {
        console.log(result)
      })
      .end()
  }
}

deleteCookie

deleteCookies

刪除所有可取得的 cookie，類似上面的 deleteCookie。

module.exports = {
  'Demo Test': browser => {
    browser
      .url('http://www.ruten.com.tw/')
      .deleteCookies('test_cookie')
      .getCookie('test_cookie', result => {
        console.log(result)
      })
      .end()
  }
}

deleteCookie

setWindowPosition

設定目前 window 的位置，以距離螢幕右下角為基準。第一個參數是 offset x，第二個參數是 offset y，第三個參數是 callback。

如下範例，會看到 demo 網頁跑到距離螢幕右下角 100px 的地方。

module.exports = {
  'Demo Test': browser => {
    browser
      .url('http://www.ruten.com.tw/')
      .setWindowPosition(100, 100)
      .end()
  }
}

setWindowPosition

switchWindow

設定目前所在視窗。第一個參數是 window 名稱，第二個參數是 callback。

module.exports = {
  'Demo Test': browser => {
    browser
      .window_handles(function(result) {
         var handle = result.value[0];
         console.log(handle);
         browser.switchWindow(handle);
       })
      .end();
  }
}

switchWindow

closeWindow

關閉目前的視窗。這裡使用 webdriver 的 window 協定指令。

browser.closeWindow();

resizeWindow

調整目前 window 的大小。第一個參數是寬度，第二個參數是高度，第三個參數是 callback。

如下範例，會看到 window 縮到 500px * 500px。

module.exports = {
  'Demo Test': browser => {
    browser
      .resizeWindow(500, 500)
      .end();
  }
}

maximizeWindow

將目前 window 展開到最大。

browser.maximizeWindow();

有時候我們會檢視網頁上的某個元素是否可見，但當 window 不夠大勢必就「看不到」。所以在測試時就會控制視窗大小、展開至最大。

getLocation

取得指定 DOM element 在頁面上的位置。這裡使用 webdriver 的 elementIdLocation 協定指令。第一個參數是使用 CSS 或 Xapth Selector 選定的元素，第二個參數是 callback（optional），回傳一個物件 { x: number, y: number }，表示距離左上角的 X 和 Y 座標。

下例預期 #userid 這個 DOM element 應該在距離頁面（不是視窗喔）左上角 200px 的位置，但實際上卻是 720px 與 105px。

switchWindow

module.exports = {
  'Demo Test': browser => {
    browser
      .url('https://member.ruten.com.tw/user/login.htm')
      .getLocation('#userid', function(result) {
        this.assert.equal(typeof result, "object");
        this.assert.equal(result.status, 0);
        this.assert.equal(result.value.x, 200);
        this.assert.equal(result.value.y, 200);
      })
      .end()
  }
}

getLocation

getLocationInView

取得指定 DOM element 在螢幕上的位置。這裡使用 webdriver 的 elementIdLocationInView 協定指令。第一個參數是使用 CSS 或 Xapth Selector 選定的元素，第二個參數是 callback（optional），回傳一個物件 { x: number, y: number }，表示距離左上角的 X 和 Y 座標。

module.exports = {
  'Demo Test': browser => {
    browser
      .url('https://member.ruten.com.tw/user/login.htm')
      .getLocationInView('#userid', function(result) {
        this.assert.equal(typeof result, "object");
        this.assert.equal(result.status, 0);
        this.assert.equal(result.value.x, 200);
        this.assert.equal(result.value.y, 200);
      })
      .end()
  }
}

getLocation

isLogAvailable

檢視 log type 是否可用。

module.exports = {
  'Demo Test': browser => {
    browser
      .isLogAvailable('browser', function(isAvailable) {
        console.log(isAvailable)
      })
      .end()
  }
}

isLogAvailable

getLog

取得 selenium 的 log。

module.exports = {
  'Demo Test': browser => {
    browser
      .getLog('browser', function(logEntriesArray) {
        console.log('Log length: ' + logEntriesArray.length);
        logEntriesArray.forEach(function(log) {
           console.log('[' + log.level + '] ' + log.timestamp + ' : ' + log.message);
         });
      })
      .end()
  }
}

getLog

這在 debug 的時候滿好用的，參考這裡。

module.exports = {
  'Demo Test': browser => {
    browser
      .url('https://member.ruten.com.tw/user/login.htm')
      .getLogTypes(function(result) {
        console.log(result);
      })
      .getLog('browser', function(result) {
        console.log(result);
      })
      .end()
    }
}

getLog

getLogTypes

取得可用的 log types，回傳一個陣列。

module.exports = {
  'Demo Test': browser => {
    browser
      .getLogTypes(function(typesArray) {
        console.log(typesArray);
      })
      .end()
  }
}

getLogTypes